<template>
	<div class="flex gap-[10px]">
		<base-toggle
			icon="betslip"
			:checked="isChecked('betslip')"
			class="text-t-header !rounded-full"
			@click="onClick('betslip')" />
		<base-toggle
			icon="discover2"
			class="text-t-header !rounded-full"
			:checked="isChecked('activity')"
			@click="onClick('activity')" />
	</div>
</template>
<script lang="ts" setup>
import { BaseToggle } from '@/components/base'
import { useLayoutStore } from '@/store'
import { SideBarType } from '@/types'

defineOptions({ name: 'AppSidebarToggles' })

const layoutStore = useLayoutStore()

const isChecked = (sidebar: SideBarType) => layoutStore.sidebar === sidebar

const onClick = (sidebar: SideBarType) =>
	layoutStore.setSidebar(layoutStore.sidebar === sidebar ? '' : sidebar)
</script>
